<template>
<!--  :default-openeds="openedMenuNames" -->
  <el-menu
    class="layout-menu"
    router
    :collapse-transition="false"
    :collapse="collapse"
    :default-active="activeMenuName">
    <template v-for="item of list">
      <re-sub-menu
        v-if="item.children.length"
        :key="item.name"
        :parent="item">
      </re-sub-menu>

      <el-menu-item v-else :key="item.name" :index="item.name" :route="item.fullPath">
        <render-icon-by-key :icon-key="item.icon" />
        <template #title>{{ item.title }}</template>
      </el-menu-item>
    </template>

    <el-menu-item index="office">
      <el-icon>
        <Menu />
      </el-icon>
      <template #title>
        <a href="//www.baidu.com" target="_blank">官网</a>
      </template>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import {defineProps, PropType} from "vue";

import {
  ElMenu,
  ElMenuItem,
  ElIcon,
} from "element-plus";


import { MenuMetaModel } from '../../store/menu';
import ReSubMenu from './reSubMenu.vue';

import RenderIconByKey from '../renderIconByKey.tsx';

const props = defineProps({
  collapse: {
    type: Boolean,
    default: false
  },
  list: {
    type: Array as PropType<MenuMetaModel[]>,
    default() {
      return [];
    }
  },
  activeMenuName: {
    type: String,
    default: ''
  },
  openedMenuNames: {
    type: Array as PropType<string[]>,
    default() {
      return [];
    }
  },
});

/*const handleSelect = (...args: any[]) => {
  console.log('handleSelect', args.at(-1));
}*/

</script>
